<template>
  <section>
    <div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
      <span class="title">移动端功能模块</span>
      <div class="kong"></div>
      <p v-if="powerlist.length !== 0" class="p_t">教师功能模块</p>
      <div class="form">
        <ul v-if="powerlist.length !== 0">
          <li v-for="(item, index) in powerlist">
            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item, index, $event)">{{item.title}}</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <!-- <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange(item, index, $event)">
                <el-checkbox v-for="city in item.cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group> -->
          </li>
        </ul>
      </div>
      <p v-if="powerlist2.length !== 0" class="p_t">家长功能模块</p>
      <div class="form">
        <ul v-if="powerlist2.length !== 0">
          <li v-for="(item, index) in powerlist2">
            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange2(item, index, $event)">{{item.resourceName}}</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <!-- <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange(item, index, $event)">
                <el-checkbox v-for="city in item.cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group> -->
          </li>
        </ul>
      </div>
      <div class="bottom" v-if="powerlist.length !== 0">
        <div class="right">
          <button class="btn btn-danger" @click="subList" size="small">确定</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  data () {
    return {
      typeSelect: null,
      typeOption: [],
      powerlist: [],
      powerlist2: [],
      spowerlist: [],
      spowerlist2: []
    }
  },
  methods: {
    subList () {
      let Nlist = []
      for (var i = 0; i < this.powerlist.length; i++) {
        if (this.powerlist[i].checkId !== null) {
          Nlist.push({id: this.powerlist[i].checkId})
        }
      }
      for (var a = 0; a < this.powerlist2.length; a++) {
        // console.log(this.powerlist2[a].checkId)
        if (this.powerlist2[a].checkId !== null) {
          Nlist.push({id: this.powerlist2[a].checkId})
        }
      }
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/position/manage/resourceConf', {
        positionId: parseInt(this.$route.query.positionId),
        resourceChannel: 'WAP',
        positionList: Nlist
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.$router.push('/schoolConf/position/manage')
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    upshow () {
      this.upShow = !this.upShow
    },
    append () {
      // store.append({ code: code++, label: 'testtest', children: [] }, data)
      this.upShow = true
    },
    nameSearch () {},
    handleCheckAllChange (item, index, e) {
      item.isIndeterminate = false
      if (item.checkAll === true) {
        item.checkId = item.id
      } else {
        item.checkId = null
      }
      this.$set(this.powerlist, index, item)
      // console.log(item)
    },
    handleCheckAllChange2 (item, index, e) {
      item.isIndeterminate = false
      if (item.checkAll === true) {
        item.checkId = item.id
      } else {
        item.checkId = null
      }
      this.$set(this.powerlist2, index, item)
      // console.log(item)
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.$http.post(this._httpUrl + 'schoolConf/position/manage/wapResource', {
      'positionId': this.$route.query.positionId
    }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.powerlist = []
        this.powerlist2 = []
        this.spowerlist = []
        this.spowerlist2 = []
        for (var d = 0; d < response.data.data.schoolList.length; d++) {
          // console.log(response.data.data.schoolList[d].resourceRange)
          if (response.data.data.schoolList[d].resourceRange === 'TEACHER') {
            this.powerlist.push(response.data.data.schoolList[d])
          } else if (response.data.data.schoolList[d].resourceRange === 'PARENT') {
            this.powerlist2.push(response.data.data.schoolList[d])
          }
        }
        for (var index = 0; index < this.powerlist.length; index++) {
          // console.log(`index:${index}`)
          this.powerlist[index].title = this.powerlist[index].resourceName
          this.powerlist[index].checkId = null
        }
        for (var h = 0; h < this.powerlist2.length; h++) {
          this.powerlist2[h].title = this.powerlist2[h].resourceName
          this.powerlist2[h].checkId = null
        }
        if (response.data.data.positionList === null) {
          this.spowerlist = []
          this.spowerlist2 = []
        } else {
          for (var b = 0; b < response.data.data.positionList.length; b++) {
            if (response.data.data.positionList[b].resourceRange === 'TEACHER') {
              this.spowerlist.push(response.data.data.positionList[b])
              // console.log(this.spowerlist)
            } else if (response.data.data.positionList[b].resourceRange === 'PARENT') {
              this.spowerlist2.push(response.data.data.positionList[b])
              // console.log(this.spowerlist2)
            }
          }
        }
        for (var g = 0; g < this.spowerlist.length; g++) {
          let tempData = this.spowerlist[g]
          tempData.checkAll = true
          tempData.title = this.spowerlist[g].resourceName
          tempData.checkId = tempData.id
          this.$set(this.powerlist, g, tempData)
          // this.spowerlist[g].checkAll = true
          // this.powerlist[g].isIndeterminate = false
          // console.log(this.spowerlist)
        }
        for (var c = 0; c < this.spowerlist2.length; c++) {
          let tempData = this.spowerlist2[c]
          tempData.checkAll = true
          tempData.title = this.spowerlist[c].resourceName
          tempData.checkId = tempData.id
          this.$set(this.powerlist2, c, tempData)
          // this.spowerlist2[c].checkAll = true
          // this.powerlist2[c].isIndeterminate = false
        }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        margin-right: 4%;
        width: 10%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      input{
        margin-left: 4%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
  }
</style>

<style scoped>
  .p_t{
    margin-left: 8%;
  }
  div[data-v-22bf8d34] ul
  {
    position: relative;
    left: 12%;
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    margin-left: 9%; 
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }
  .form ul li{
    width: 12% !important;
    float: left !important;
    margin-right: 6% !important;
    margin-bottom: 1% !important;
  }
  .form .firstLine{
    padding: 30px 0 10px 0;
  }
  .form .secondLine{
    padding: 30px 0 50px 0;
  }
  .form .form-longText{
    width: 50%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .form .form-text{
    width: 70%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .form ul{
    width: 100%;
    margin-top: 30px;
    margin-left: 10%;
    overflow: hidden;
  }
  .form ul li .el-checkbox{
    position: relative; left: 14%;
  }
  .form ul li .el-checkbox-group{
    width: 100%;
  }
  .form ul li .el-checkbox-group .el-checkbox{
    margin-left: 4%;
    margin-right: 1%;
    margin-top: 8px;
  }
  .bottom .right{
    text-align: right;
    padding: 0 60px 0 0;
  }
  .el-checkbox-group{
    width: 100px;
  }
  .el-checkbox-group .el-checkbox{
    clear: both;
  }
  label[data-v-d525f0a6]{
    clear: both;
  }
</style>
